<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{ info }}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h2>a数量：{{ numbers.a }}</h2>
        <h2>b数量：{{ numbers.b }}</h2>
    </div>    

    <script>
        /* 
            监视属性有2种写法：
                1.放在new Vue的里面，
                2.放在new Vue的外面，这种必须要先获取vm对象
        */
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: "#root",
            data: {
                isHot: true,
                numbers : {
                    a : 1,
                    b : 2
                }
            },
            methods: {
                changeWeather() {
                    // 取反操作
                    this.isHot = !this.isHot
                }
            },
            computed: {
                // 进行判断
                info() {
                    return this.isHot ? "炎热" : "凉爽"
                } 
            },
            // 监视属性
            watch: {
                isHot : {
                    // 初始化时让handler调用
                    immediate: true,

                    //  handler指定当监视的属性发生变化的时候调用
                    handler(newValue, oldvalue) {
                        console.log("isHot被修改了", newValue, oldvalue);
                    }
                },
                //  深度监视时使用.去监视属性,需要使用引号包裹

                // "numbers.a" : {
                //     handler() {
                //         console.log("a改变了");
                //     }
                // },
                // "numbers.b" : {
                //     handler() {
                //         console.log("b改变了");
                //     }
                // },
                
                // 但是这样一个一个去弄，比较麻烦
                // 开启深度监视：deep: true
                numbers : {
                    deep : true,
                    handler() {
                        console.log("有东西改变了");
                    }
                }


            },
        });

        // vm.$watch("isHot", {
        //     immediate: true,
        //     handler(newValue, oldValue) {
        //         console.log("isHot被修改了", newValue, oldValue);                
        //     }
        // })

    </script>
</body>
</html>